<template>
  <div class="msg-detail-wrap">
    <el-dialog
      title="消息详情"
      :visible.sync="$store.state.msg.dialogTableVisible"
      @close="closeDialog()"
    >
      <div class="msg-title">消息类型：{{ info.title }}</div>
      <div class="msg-content">
        <div class="msg-content-label">消息内容：</div>
        <div class="msg-content-detail">
          {{ info.msgDate }}
        </div>
      </div>
      <div class="msg-bottom flex">
        <div class="msg-sourceName">寄件人：{{info.sourceName}}</div>
        <div class="msg-sendName">收件人：{{info.sendName}}</div>
      </div>
      <div class="msg-time">
        寄件时间：{{info.createTime}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          title: "消息",
          msgDate: "无内容",
        };
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    closeDialog() {
      this.$store.commit("msg/changeDialogShow", false);
    },
    // 设置消息内容
    setInfo() {},
  },
};
</script>
 
<style lang="less" scoped>
.msg-detail-wrap {
  .msg-title {
    font-size: 16px;
    font-weight: 700;
  }
  .msg-content{
    padding: 20px 0;
    .msg-content-label{
      margin-bottom: 20px;
    }
    .msg-content-detail{
      text-indent: 2em;
    }

  }
  .msg-bottom{
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>